.loginBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  .box {
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .6s;
    background-color: #fff;
    box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    margin-bottom: 25px;
    padding: 0;
    border-radius: 16px;
    transform-origin: center center;
    width: 0;
    height: 0;
    .login {
      width: 100%;
      width: 100%;
    }
  }
}

.box_flip_l {
  animation: flip_l 1s linear
}

.box_flip_r {
  animation: flip_r 1s linear
}

@keyframes flip_l {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flip_r {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}